@charset "utf-8";
@import 'reset';
body{
    background: #f3f5f7ff;
    .search{
        width: 100vw;
        height: 12.5333vw;
        background-color: white;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;
        margin-bottom: 1.0667vw;
        input{
            width: 95vw;
            height: 9.3333vw;
            background: #f3f5f7ff;
            border: none;
            position: relative;
            font-size: 4.2667vw;
        }
        input::placeholder{
            color: #71797fff;
            font-size: 3.7333vw;
            font-weight: 400;
            position: absolute;
            left: 11.2vw;
            top: 2.4vw;
    }
}
    .box{
        height: 152.5333vw;
    .broadside{
        float: left;
        width: 21.3333vw;
        height: 152.5333vw;
        background-color: white;
        ul{
            li{
                margin-top: 4vw;
                width: 21.3333vw;
                height: 10.6667vw;
                p{
                    color: #333333ff;
                    font-size: 3.7333vw;
                    font-weight: 400;
                    text-align: center;
                    line-height: 10.6667vw;
                }
            }
            li:first-child{
                border-left: .5333vw solid #884e22ff;
                p{
                    color: #884e22ff;
                }
            }
        }
    }
    .page{
        width: 76.6667vw;
        height: 152.5333vw;
        float: left;
        background-color: white;
        border-left: .5333vw solid #f3f5f7ff;
        overflow: hidden;
        img{
            width: 72.5333vw;
            height: 37.0667vw;
            margin: 2.5333vw 3.4667vw 4.8vw 2.6667vw;
        }
        .use{
            margin: 0 auto;
            width: 71.0667vw;
            height: 62.6667vw;
            border:.0533vw solid #9f999980;
            overflow: hidden;
            h1{
                color: #555555ff;
                font-size: 4.2667vw;
                font-weight: 600;
                text-align: left;
                margin: 1.8667vw .5333vw;
            }
            ul{
                width: 71.0667vw;
                height: 53.3333vw;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                align-content: space-around;
                li{
                    width: 28.3467vw;
                    height: 5.3333vw;
                    color: #666666ff;
                    font-size: 3.7333vw;
                    font-weight: 400;
                    text-align: center;
                }
            }
        }
    }
}
    .tabbar-false{
        width: 100vw;
        height: 13.6vw;
    }
    .tabbar-foot{
        width: 100vw;
        height: 13.6vw;
        background-color: #F6F6F6;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        position: fixed;
        bottom: 0;
        z-index: 1;
        ul{
            margin-top: .5333vw;
            position: absolute;
            width: 62.4vw;
            display: flex;
            justify-content: space-between;
            a{
                text-decoration: none;
                cursor: pointer;
            li{
                .iconfont{
                    color: black;
                    font-size: 8vw;
                }
                p{
                    text-align: center;
                    color: #000000ff;
                    font-size: 3.2vw;
                    font-weight: 400;
                }
            }
        }
        a:hover{
            .iconfont{
                color: red;
            }
            p{
                color: red;
            }
        }
        a:nth-child(2){
            li{
                .iconfont{
                    color: red;
                }
                p{
                    color: red;
                }
            }
        }    
        }
    }
}
